<template>
	<view class="layout">
		<uni-nav-bar dark :fixed="true" shadow background-color="#59dce8" status-bar left-icon="left" left-text="返回"
			:title="title" @clickLeft="back" />
		<view class="box">
			<view></view>
			<view class="clear" @click="clearAll">清空</view>
		</view>
		<view class="theme">
			<view v-if="wallpaperList" class="item" v-for="item in wallpaperList" :key="item._id"
				@click="goDetail(item._id)">
				<image v-if="item" :src="item.picurl.url" mode="aspectFill"></image>
			</view>
		</view>
		<uni-load-more status="no-more"></uni-load-more>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref
	} from "vue";

	const title = ref("")
	const status = ref(0)
	const wallpaperList = ref([])

	onLoad((e) => {
		title.value = e.name;
		status.value = e.status;
		getWallpaperLists() // 传递默认参数
	});

	// 获取壁纸列表
	const getWallpaperLists = () => {
		if (status.value == 0) {
			// 获取 downLoadList 缓存
			wallpaperList.value = uni.getStorageSync("downLoadList") || [];
		} else if (status.value == 1) {
			// 获取 likedList 缓存
			wallpaperList.value = uni.getStorageSync("likedList") || [];
		} else if (status.value == 2) {
			// 获取 scoreList 缓存
			wallpaperList.value = uni.getStorageSync("scoreList") || [];
		}
	};

	const back = () => {
		uni.navigateBack()
	}
	const goDetail = (id) => {
		uni.setStorageSync("storgClassList", wallpaperList.value)
		uni.navigateTo({
			url: "/pages/detail/detail?id=" + id
		})
	}
	//清除缓存
	const clearAll = () => {
		uni.showModal({
			title: "清空列表",
			content:"是否清空全部内容",
			success: function(res) {
				if (res.confirm) {
					if (status.value == 0) {
						uni.removeStorageSync("downLoadList");
					} else if (status.value == 1) {
						uni.removeStorageSync("likedList");
					} else if (status.value == 2) {
						uni.removeStorageSync("scoreList");
					}
					wallpaperList.value = []
					uni.showToast({
						title:"清空成功",
						icon:"none"
					})
				} else if (res.cancel) {
					uni.showToast({
						title:"已取消",
						icon:"none"
					})
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.layout {
		.box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.clear {
				width: 120rpx;
				height: 60rpx;
				margin: 30rpx 10rpx 0 0;
				font-size: 30rpx;
				text-align: center;
				border: 1rpx solid #ccc;
				line-height: 60rpx;
				border-radius: 5rpx;
				background-color: #f0f0f0;
				color: #333;
				transition: background-color 0.3s;
			}
		}

		.theme {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 15rpx;
			margin: 30rpx 20rpx;

			.item {
				position: relative; // 设置为相对定位

				image {
					width: 220rpx;
					height: 400rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>